<template>
  <div class="card">
    <div class="title-sign" style="margin-bottom: 10px; margin-top: 5px">库存信息</div>
    <!--   【1】搜索   -->
    <SearchModule @search="searchFn" />
    <!--   【2】表格   -->
    <vxe-table ref="tableRef" :loading="state.loading" style="margin-top: 15px" max-height="670px" :data="state.tableList" :expand-config="{ accordion: true }">
      <vxe-column type="expand" width="180">
        <template #content="{ row }">
          <SubTable :data="row" @view="viewStartFn" @divided-packages="dividedPackagesStartFn" />
        </template>
      </vxe-column>
      <vxe-column field="serial" title="冻存盒编号" />
      <vxe-column field="boxType" title="冻存盒类型" />
      <vxe-column field="storageDesp" title="存储位置" />
    </vxe-table>
    <!--   【3】查看弹窗   -->
    <IiViewModal v-model:show-modal="state.showViewModal" :cur-data="state.curData" :sub-data="state.subData" />
    <!--   【4】分装弹窗   -->
    <IiDivideModal v-model:show-modal="state.showDivideModal" :data="state.curData" @modal-ok="searchFn({})" />
  </div>
</template>

<script setup lang="ts">
import type { SearchState } from './components/search-module.vue';
import SearchModule from '@/modules/sample-inventory/pages/inventory-inquiry/components/search-module.vue';
import SubTable from '@/modules/sample-inventory/pages/inventory-inquiry/components/sub-table.vue';
import IiViewModal from '@/modules/sample-inventory/pages/inventory-inquiry/components/ii-view-modal.vue';
import IiDivideModal from '@/modules/sample-inventory/pages/inventory-inquiry/components/ii-divide-modal.vue';
import { getOutputData } from '@/modules/sample_manage/api/out_input';
import { ampledetailed } from '@/modules/sample_manage/api/registration_sample';
import { getSampleInfo } from '@/api/store/single_data';
import { reactive, ref } from 'vue';
import { VxeTableInstance } from 'vxe-table';
import _ from 'lodash-es';

const state = reactive({
  loading: false,
  showViewModal: false,
  showDivideModal: false,
  tableList: [],
  subData: {},
  curData: {},
});
const tableRef = ref<VxeTableInstance>();

/**
 * table-data
 */
const searchFn = async (searchData: SearchState['searchData']) => {
  state.loading = true;
  let params = { type: 4, queryExtData: true, pageNum: 1, pageSize: 100000, 'orderBy[0].field': 'id', 'orderBy[0].order': 'asc' };
  const data = _.cloneDeep(searchData);
  data?.sampleTimeEqual?.length && (data.sampleTimeEqual = data.sampleTimeEqual?.join());
  data.extDataList = [
    {
      name: 'specimen_type',
      value: data.extDataList,
    },
  ];
  const res = await getOutputData(data, params);
  state.tableList = res.result.data.filter((item) => {
    return item.subSpecimens && item.subSpecimens?.length > 0;
  });
  state.loading = false;
};
searchFn({});

/**
 * view
 */
const viewStartFn = async (data) => {
  const res1 = await ampledetailed(data.id);
  const res2 = await getSampleInfo(data.parentId);
  state.subData = data;
  state.curData = Object.assign(res2.result, res1.result);
  state.curData.extDataList.forEach((item) => {
    if (item.key != 'sampleTime') {
      state.curData[item.key] = item.value;
    }
  });
  state.showViewModal = true;
};

/**
 * divided-packages
 */
const dividedPackagesStartFn = async (data) => {
  const res = await ampledetailed(data.id);
  state.curData = res.result;
  state.curData.specimenType = data.extDataList?.find((item) => item?.key === 'specimen_type')?.value;
  // state.curData = data;
  state.showDivideModal = true;
};
</script>

<style scoped lang="less">
.card {
  width: 100%;
  height: 96%;
  padding: 7px 13px;
  background-color: #fff;
}
:deep(.vxe-icon--arrow-right:before) {
  border-top-color: #606266;
  border-right-color: #606266;
}
</style>
